import React, { useState } from 'react';
import { Button, Layout, Avatar, Dropdown } from 'antd';
import { UserOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
} from '@ant-design/icons';
import './index.css';
import { useDispatch } from 'react-redux'
import { collapesChange } from '@/store/redux/table.ts'

const { Header } = Layout;
const items: MenuProps['items'] = [
    {
        key: '1',
        label: (
            <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
                1st menu item
            </a>
        ),
    },
    {
        key: '2',
        label: (
            <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
                2nd menu item (disabled)
            </a>
        ),
        disabled: true,
    },
    {
        key: '4',
        danger: true,
        label: 'a danger item',
    },
];
// 使用更准确的 props 类型定义
interface HeadersProps {
    collapsed: boolean;
    onCollapse: (collapsed: boolean) => void;
}
const Headers: React.FC<HeadersProps> = ({ collapsed }) => {
    const dispatch = useDispatch()
    const changeCollapsed = () => {
        dispatch(collapesChange())
    }
    return (
        <div> <Header className='headers-container'>
            <Button
                type="text"
                icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                onClick={changeCollapsed}
                style={{
                    fontSize: '16px',
                    width: 64,
                    height: 64,
                }}
            />
            <Dropdown menu={{ items }}>
                <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
            </Dropdown>

        </Header></div>
    )
}
export default Headers;